$(() => {

    let index = 1;
    // 1、获取文章列表数据
    function getArticle() {
        $.get('/admin/article/query', {
            perpage: 15
        }, (res) => {
            if (res.code) {
                const list = res.data.data;
                const data = res.data;
                const html = template('trTpl', {
                    list
                });
                $('tbody').html(html);
                paging(data);
            }
        });
    };


    // 2、分页功能
    function paging(data) {
        // 页面总数
        const totalPage = data.totalPage;
        let li = '';
        $('.pagination').html('');
        for (let i = 1; i <= totalPage; i++) {
            li += ` <li class="page-item"><a href="#" class="page-link">${i}</a></li>`
        }
        li = ` <li class="page-item prev disabled"><a href="#" class="page-link">上一页</a></li>${li}<li class="page-item next"><a href="#" class="page-link">下一页</a></li>`;
        $('.pagination').html(li);
        addbg(1);
        skinBtn();
        togglePage(totalPage);
    }
    // 2.1、跳转按钮
    function skinBtn(key, type, state, page) {
        const btn = document.querySelectorAll('.page-item');
        for (let i = 1; i < btn.length - 1; i++) {
            btn[i].onclick = function () {
                index = i;
                page = this.innerText;
                $.get('/admin/article/query', {
                    type,
                    page,
                    key,
                    state,
                    perpage: 15
                }, res => {
                    const list = res.data.data;
                    const html = template('trTpl', {
                        list
                    });
                    $('tbody').html(html);
                    addbg(page);
                });
            }
        }
    };

    // 2.2添加背景
    function addbg(index) {
        $('.page-item').eq(index).find('a').css({
            'backgroundColor': 'skyblue',
            'color': '#fff',
        }).parent().siblings().find('a').css({
            'backgroundColor': '',
            'color': '',
        });
    }

    // 2.3、上一页 / 下一页
    function togglePage(totalPage) {
        $('.next').click(() => {
            if (index >= 1) $('.prev').removeClass('disabled');
            if (index >= totalPage) {
                $(this).addClass('disabled');
                return;
            };
            index++;
            console.log(index);
            addbg(index);
            cutPage(index)
        })
        $('.prev').click(() => {
            if (index <= 1) return;
            if (index < totalPage) $('.next').removeClass('disabled');
            index--;
            addbg(index);
            cutPage(index)
        })
    }

    function cutPage(page) {
        $.get('/admin/article/query', {
            page,perpage:15,
        }, res => {
            const list = res.data.data;
            const html = template('trTpl', {
                list
            });
            $('tbody').html(html);
            addbg(page);
        })
    }

    // 3、筛选文章
    // 3.1、渲染文章类型
    renderType();

    function renderType() {
        $.get('/admin/category/list', res => {
            const artType = res.data;
            const options = template('artTypeTpl', {
                artType
            });
            $('#selCategory').append(options);
        })
    }
    // 3.2、筛选按钮
    $('#btnSearch').click(() => {
        // 关键词
        const key = $('#aname').val().trim();
        // 文章类型
        const type = $('#selCategory').val();
        // 文章状态
        const state = $('#selStatus').val().trim();
        const params = {
            key: key,
            type: type,
            state: state,
            perpage: 15
        };
        $.get('/admin/article/query', params, res => {
            const list = res.data.data;
            const totalPage=list.totalPage;
            if (list.length === 0) {
                layer.msg('没有该文章内容！');
                return;
            }
            const data = res.data;
            const html = template('trTpl', {
                list
            });
            $('tbody').html(html);
            togglePage(totalPage)
            paging(data);
            skinBtn(key, type, state);
        })
    })

    // 4、重置功能
    $('[type="reset"]').click(()=>{
        getArticle();
    });

    // 5、删除功能
    $('tbody').on('click', '.delete', function () {
        const id = $(this).data('id');
        $.post('/admin/article/delete', {
            id
        }, res => {
            layer.msg(res.msg);
            getArticle();
        })
    })
    getArticle();
})